<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8">
    <!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>职到 - 职位，手到擒来！</title>
    <meta name="description" content="KIDS is a clean, modern, and fully responsive Html Template. Take your Startup business website to the next level. It is designed for kindergarten, childcare, homeschooling, school, learning, playground businesses or any type of person or business who wants to showcase their work, services and professional way.">
    <meta name="keywords" content="business, care, childcare, children, clean, corporate, happykids, homeschool, kids, kindergarten, playground, responsive, school, learning">
    <meta name="author" content="rometheme.net">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />

    <!-- ==============================================
    Favicons
    =============================================== -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

    <!-- ==============================================
    CSS VENDOR
    =============================================== -->
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/owl.theme.default.min.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/magnific-popup.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/animate.min.css">

    <!-- ==============================================
    Custom Stylesheet
    =============================================== -->
    <link rel="stylesheet" type="text/css" href="css/style(qt).css" />

    <script src="js/vendor/modernizr.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/style-add-forum.css">


    <link href="/css/table.css" rel="stylesheet" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>

</head>

<body>

<!-- LOAD PAGE -->
<div class="animationload">
    <div class="loader"></div>
</div>

<!-- BACK TO TOP SECTION -->
<a href="#0" class="cd-top cd-is-visible cd-fade-out">Top</a>

<!-- HEADER -->


<!-- TOPBAR -->
<div class="topbar">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-sm-8 col-md-6">
                <div class="info">
                    <div class="info-item">
                        <i class="fa fa-phone"></i> +62 7144 3300
                    </div>
                    <div class="info-item">
                        <i class="fa fa-envelope-o"></i> <a href="mailto:support@zhidao.com" title="">support@zhidao.com</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-6">

                <div class="sosmed-icon pull-right d-inline-flex">
                    <a class="navbar-brand" href="index.html">
                        <img src="images/wode.png" alt="">
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="navbar-brand" href="index.html">
                        <img src="images/help.png" alt="">
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 导航栏 -->
<div class="navbar-main">
    <div class="container">
        <nav id="navbar-example" class="navbar navbar-expand-lg">
            <a class="navbar-brand" href="index.html">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="images/logo.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="images/slogan.png" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">工作</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="classes.html">投递</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="teachers.html">花果山论坛</a>
                    </li>

                </ul>
            </div>
        </nav> <!-- -->

    </div>
</div>


<!-- 此处是内容 -->
<div class="row">
    <div class="col-sm-2"></div>

    <div class="col-sm-6 col-xs-20 my_edit" id="app">
        <div class="row" id="edit_form" style="width:1000px">
            <span class="pull-left" style="color: rgb(255, 101, 11);margin:10px;">发表评论</span>
            <span class="tips pull-right" style="margin:10px;"></span>
            <form role="form" method="post">
                <div class="form-group"  style="width:900px; height:200px;margin:30px;" >
                    发表人：<div id="app.demo"></div>


                    <div>内容<span>*</span></div>
                    <input v-model="res.response_text" style="margin:5px;height:100px" class="form-control " contentEditable="true" id="content">
                    <div class="col-sm-12" style="margin-top: 12px;">
                        <span class="emoji" >表情</span>
                        <input type="file"  class="pic"  id="exampleInputFile">
                        <span>
                                        <img class="preview" src="">
                                    </span>


                        <div class="myEmoji" >
                            <ul id="myTab" class="nav nav-tabs">
                                <li class="active">
                                    <a href="#set" data-toggle="tab">
                                        ***预设
                                    </a>
                                </li>
                                <a>***</a>
                                <li><a href="#hot" data-toggle="tab">    热门***</a></li>

                            </ul>
                            <div id="myTabContent" class="tab-content">
                                <div class="tab-pane fade in active" id="set">
                                    <div class="emoji_1"></div>

                                </div>
                                <div class="tab-pane fade" id="hot">
                                    <div class="emoji_2"></div>
                                </div>

                            </div>
                        </div>
                        <button type="button" @click="saveRes" class="btn btn-default pull-right disabled">发表</button>
                    </div>
                </div>
            </form>
        </div>



    </div>

</div>

<script src="js/jquery-3.1.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">

    new Vue({
        el:"#app",
        data:{
            res:{
                applicant_id:window.localStorage.getItem("applicant_id"),
                post_id:window.localStorage.getItem("post_id"),
            }
        },
        methods:{
            saveRes:function(){
                var applicant_id = window.localStorage.getItem("applicant_id")
                var post_id = window.localStorage.getItem("post_id")
                console.log(this.res)
                axios.post('/res/add',this.res)
                    .then(function (response) {
                        console.log(response.data);
                        if(response.data==1){
                            alert("发表评论成功！")
                            location.href="res_list.html"
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        mounted(){
/*            var _this = this
            var post_id = window.localStorage.getItem("post_id")
            console.log("主键为："+ post_id)
            axios.get('/res/post',{
                params:{
                    post_id:post_id,
                }
            }).then(function (response) {
                _this.res=response.data;
                console.log(response.data);
            })
                .catch(function (error) {
                    console.log(error);
                });
            axios.get('/app/list')
                .then(function (response) {
                    _this.applicantinfo=response.data;
                    console.log(_this.applicantinfo);
                })
                .catch(function (error) {
                    console.log(error);
                });*/
        },
    })

    $(function(){

        $("#content").keyup(function(){

            //判断输入的字符串长度
            var content_len = $("#content").text().replace(/\s/g,"").length;

            $(".tips").text("已经输入"+content_len+"个字");


            if(content_len==0){
                // alert(content);
                $(".tips").text("");
                $("#send").addClass("disabled");
                return false;
            }else{
                $("#send").removeClass("disabled");
            }
        });


        $(".pic").click(function(){

            $(".select_Img").click();


        })

        // 	function confirm(){

        // 		var r= new FileReader();
        // f=$(".select_Img").files[0];
        // r.readAsDataURL(f);
        // r.onload=function(e) {
        // 	$(".preview").src=this.result;

        // };
        // 	}

        //点击按钮发送内容
        $("#send").click(function(){

            // var myDate = new Date();

            //   var min = myDate.getMinutes();

            //   var time = min-(min-1);

            //   //alert(time);

            var content1=$("#content1").html();

            //判断选择的是否是图片格式
            var imgPath = $(".imgPath").text();
            var start  = imgPath.lastIndexOf(".");
            var postfix = imgPath.substring(start,imgPath.length).toUpperCase();


            if(imgPath!=""){

                if(postfix!=".PNG"&&postfix!=".JPG"&&postfix!=".GIF"&&postfix!=".JPEG"){
                    alert("图片格式需为png,gif,jpeg,jpg格式");
                }else{
                    $(".item_msg").append("<div class='col-sm-12 col-xs-12 message' > <img src='img/icon.png' class='col-sm-2 col-xs-2' style='border-radius: 50%'><div class='col-sm-10 col-xs-10'><span style='font-weight: bold;''>Jack.C</span> <br><small class='date' style='color:#999'>刚刚</small><div class='msg_content'>"+content+"<img class='mypic' onerror='this.src='img/bg_1.jpg' src='file:///"+imgPath+"' ></div></div></div>");
                }
            }else{
                $(".item_msg").append("<div class='col-sm-12 col-xs-12 message' > <img src='img/icon.png' class='col-sm-2 col-xs-2' style='border-radius: 50%'><div class='col-sm-10 col-xs-10'><span style='font-weight: bold;''>Jack.C</span> <br><small class='date' style='color:#999'>刚刚</small><div class='msg_content'>"+content+"</div></div></div>");
            }

        });

        //添加表情包1
        for (var i = 1; i < 60; i++) {

            $(".emoji_1").append("<img src='img/f"+i+".png' style='width:35px;height:35px' >");
        }
        //添加表情包2
        for (var i = 1; i < 61; i++) {

            $(".emoji_2").append("<img src='img/h"+i+".png' style='width:35px;height:35px' >");
        }


        $(".emoji").click(function(){

            $(".myEmoji").show();

            //点击空白处隐藏弹出层
            $(document).click(function (e) {

                if (!$("#edit_form").is(e.target) && $("#edit_form").has(e.target).length === 0) {

                    $(".myEmoji").hide();
                }
            });


        });

        //将表情添加到输入框
        $(".myEmoji img").each(function(){
            $(this).click(function(){
                var url = $(this)[0].src;

                $('#content').append("<img src='"+url+"' style='width:25px;height:25px' >");

                $("#send").removeClass("disabled");
            })
        })

    })
</script>


<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
<br>
<br>
<div class="footer" data-background="images/bg.jpg">
    <div class="content-wrap">
        <div class="container">

            <div class="row">
                <div class="col-sm-3 col-md-3">
                    <div class="footer-item">
                        <img src="images/logo.png" alt="logo bottom" class="logo-bottom">
                        <div class="spacer-30"></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
                        <a href="#"><i class="fa fa-angle-right"></i> Read More</a>
                    </div>
                </div>

                <div class="col-sm-3 col-md-3">
                    <div class="footer-item">
                        <div class="footer-title">
                            Contact Info
                        </div>
                        <ul class="list-info">
                            <li>
                                <div class="info-icon">
                                    <span class="fa fa-map-marker"></span>
                                </div>
                                <div class="info-text">99 S.t Jomblo Park Pekanbaru 28292. Indonesia</div> </li>
                            <li>
                                <div class="info-icon">
                                    <span class="fa fa-phone"></span>
                                </div>
                                <div class="info-text">(0761) 654-123987</div>
                            </li>
                            <li>
                                <div class="info-icon">
                                    <span class="fa fa-envelope"></span>
                                </div>
                                <div class="info-text">info@yoursite.com</div>
                            </li>
                            <li>
                                <div class="info-icon">
                                    <span class="fa fa-clock-o"></span>
                                </div>
                                <div class="info-text">Mon - Sat 09:00 - 17:00</div>
                            </li>
                        </ul>

                    </div>
                </div>

                <div class="col-sm-3 col-md-3">
                    <div class="footer-item">
                        <div class="footer-title">
                            Useful Links
                        </div>

                        <ul class="list">
                            <li><a href="index2.html" title="About us">关于我们</a></li>
                            <li><a href="help1.html" title="Contact Us">帮助</a></li>
                        </ul>

                    </div>
                </div>

                <div class="col-sm-3 col-md-3">
                    <div class="footer-item">
                        <div class="footer-title">
                            Get in Touch
                        </div>
                        <p>Lit sed The Best in dolor sit amet consectetur adipisicing elit sedconsectetur adipisicing</p>
                        <div class="sosmed-icon d-inline-flex">
                            <a href="#" class="fb"><i class="fa fa-facebook"></i></a>
                            <a href="#" class="tw"><i class="fa fa-twitter"></i></a>
                            <a href="#" class="ig"><i class="fa fa-instagram"></i></a>
                            <a href="#" class="in"><i class="fa fa-linkedin"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="fcopy">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <p class="ftex">Copyright 2019 &copy; <span class="color-primary">Kids HTML Template</span>. Designed by <span class="color-primary">Rometheme.</span></p>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- JS VENDOR -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/owl.carousel.js"></script>
<script src="js/vendor/jquery.magnific-popup.min.js"></script>
<script src="js/vendor/isotope.pkgd.min.js"></script>
<script src="js/vendor/imagesloaded.pkgd.min.js"></script>

<!-- SENDMAIL -->
<script src="js/vendor/validator.min.js"></script>
<script src="js/vendor/form-scripts.js"></script>

<script src="js/script(qt).js"></script>
<script>
    var x = window.localStorage.getItem("applicant_name");
    document.getElementById("app.demo").innerHTML = x;
</script>

</body>
</html>
